<template>
  <div class="leftmenu1">
    <el-menu
      unique-opened
      router
      :default-active="this.$route.path"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <!--      <h1>前台中心</h1>-->
      <div class="menus" v-for="(item, i) in menu" :key="i">
        <!-- 没有子菜单 -->
        <el-menu-item
          v-if="item.children.length == 1"
          :index="
            item.children[0].pathOther
              ? `/${item.children[0].path}?a=${item.children[0].pathOther}`
              : (item.path == null ? '' : item.path) +
                '/' +
                item.children[0].path
          "
        >
          <i :class="`iconfont ${item.authorityIcon}`"></i>
          <span slot="title">{{ item.children[0].authorityName }}</span>
        </el-menu-item>
        <!-- 有子菜单 -->
        <el-submenu v-if="item.children.length > 1" :index="item.path">
          <template slot="title">
            <i :class="`iconfont ${item.authorityIcon}`"></i>
            <span>{{ item.authorityName }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="(v, i) in item.children"
              :key="i"
              :index="item.path + '/' + v.path"
              >{{ v.authorityName }}</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
      </div>
    </el-menu>
  </div>
</template>
<script>
import router, { asyncRoutes } from "@/router";
import local from "@/utils/local.js";
export default {
  data() {
    return {
      menu: [],
    };
  },
  async created() {
    let roleMenu = this.$store.state.roleMenu;
    // 过滤以及二级路由 isshow===true的显示
    this.menu = roleMenu.filter((item) => {
      if (item.isShow === "true" && item.children) {
        item.children = item.children.filter((son) => son.isShow === "true");
        return item;
      }
    });
  },
};
</script>
<style lang="less" scoped>
.leftmenu1 {
  h1 {
    font-size: 18px;
    color: #fff;
    margin-left: 40px;
    line-height: 40px;
  }
  .iconfont {
    margin-right: 10px;
    color: #fff;
    font-size: 18px;
  }
  .el-menu {
    border: none;
    padding-bottom: 50px;
  }
}
.el-menu-item-group{
  .el-menu-item{
    margin-left:20px;
  }
}
</style>
